<template>
  <div>
    <div class="flex-center" style="margin:10px 0 16px">
      <Title title="关联借款单" font-size="16px">
        <div class="all-ratio" v-if="!showMobilePage">
        <img class="icon" :src="icon_17" alt="">总借款金额(元)：<span class="text">{{ allAmount }}</span>
        </div>
      </Title>
      <slot name="addBtn"/>
    </div>
    <div v-if="showMobilePage" class="all-ratio mb15">
      总借款金额(元)：<span class="text">{{ allAmount }}</span>
    </div>
    <u-table
      v-if="list.length > 0"
      :data="handleData"
      :border="false"
      :row-height="49"
      class="fb-table"
      element-loading-text="加载中..."
      empty-text="暂无数据"
      header-cell-class-name="order-data-header-cell"
      fit
      hightlight-current-row>
      <u-table-column align="left" label="审批单号" min-width="130">
        <template slot-scope="scope">
          <el-tooltip :open-delay="800" placement="top" effect="dark">
            <div slot="content" style="max-width: 200px;">{{ scope.row.approvalNum || '--' }}</div>
            <div class="ellipsisOne" style="cursor:pointer;color:#406eff;" @click="toDetail(scope.row)">{{ scope.row.approvalNum || '--' }}</div>
          </el-tooltip>
        </template>
      </u-table-column>
      <u-table-column align="right" label="借款金额(元)">
        <template slot-scope="scope">
          <PriceColumn :real-val="scope.row.amount" :price="scope.row.amount / 100" />
        </template>
      </u-table-column>
      <u-table-column align="left" label="借款说明">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.remark" />
        </template>
      </u-table-column>
      <u-table-column align="left" label="借款周期" min-width="140">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.loanStartDate || scope.row.loanEndDate" :open-delay="800" class="item" placement="top" effect="dark">
            <div slot="content">{{ scope.row.loanStartDate | standardFormat('YYYY/MM/DD') }} - {{ scope.row.loanEndDate | standardFormat('YYYY/MM/DD') }}</div>
            <div>{{ scope.row.loanStartDate | standardFormat('YYYY/MM/DD') }} - {{ scope.row.loanEndDate | standardFormat('YYYY/MM/DD') }}</div>
          </el-tooltip>
          <span v-else>--</span>
        </template>
      </u-table-column>
      <u-table-column align="left" label="申请人">
        <template slot-scope="scope">
          <CheckUserInfo v-if="scope.row.applicant" :label="scope.row.applicant" :user-id="scope.row.applicantId" />
          <div v-else>--</div>
        </template>
      </u-table-column>
      <u-table-column align="left" label="申请部门">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.applyDepartment" />
        </template>
      </u-table-column>
      <u-table-column align="left" label="所属公司">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.company" />
        </template>
      </u-table-column>
      <u-table-column v-if="isCreate" align="left" label="操作" width="110" fixed="right">
        <template slot-scope="scope">
          <div class="delete" @click="delOrder(scope.$index)">删除</div>
        </template>
      </u-table-column>
    </u-table>
    <EmptyPlaceholder v-else slot="empty" empty-text="暂无数据" mode="border" style="padding:12px 0 18px 0"/>
    <el-row :justify="showMobilePage ? 'start':'end'" type="flex" class="pagination-area">
      <el-pagination
        v-show="list.length > 0"
        :current-page.sync="page"
        :page-size="perPage"
        :total="list.length"
        :page-sizes="[10, 20, 50, 100, 250, 500]"
        :small="showMobilePage"
        :layout="showMobilePage ? 'prev, pager, next':'total, prev, pager, next, sizes, jumper'"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-row>
  </div>
</template>
<script>
// 组件
import Title from '@/components/Title';
import EmptyPlaceholder from '@/components/Common/emptyPlaceholder';
// 函数
import { hasRouteAuth } from '@/utils/permission';
//  api
import { standardFormat } from '@/filters/date';
import { mapState } from 'vuex';
import icon_17 from '@/assets/dataDisplay/icon_17.png';

export default {
  components: {
    EmptyPlaceholder, Title
  },
  filters: {
    standardFormat
  },
  props: {
    list: {
      type: Array,
      default: () => [
      ]
    },
    isCreate: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      icon_17,
      page: 1,
      perPage: 10,
      loading: false,
      antiShakeTime: 0 // 防抖时间
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    handleData() {
      return this.list.slice((this.page - 1) * this.perPage, this.page * this.perPage);
    },
    // 总借款金额
    allAmount() {
      if (!Array.isArray(this.list) || !this.list || !this.list.length) {
        return Number(0).toFixed(2);
      }
      return (Number(this.list.map(el => el.amount).reduce((pre, next) => { return pre + next; }, 0)) / 100).toFixed(2);
    }
  },
  created() {
  },
  methods: {
    hasRouteAuth,
    // 翻页
    handleSizeChange(val) {
      this.perPage = val;
    },
    handleCurrentChange(val) {
      this.page = val;
    },
    // 跳转借款单详情
    toDetail(row) {
      const routeUrl = this.$router.resolve({
        name: 'loanDetail',
        query: {
          id: row.id,
          processId: row.processId
        }
      });
      window.open(routeUrl.href, '_blank');
    },
    delOrder(index) {
      const idx = index + ((this.page - 1) * this.perPage);
      this.$emit('delOrder', idx);
    }
  }
};
</script>
<style lang="scss" scoped>
.delete{
  color: #FF4E5F;
}
.pagination-area{
  margin-top: 10px;
}
.all-ratio{
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
  color: #999999;
  font-weight: normal;
  margin-left: 8px;
  padding: 0 21px 0 4px;
  background: #FAFAFC;
  border-radius: 2px;
  .icon {
    width: 14px;
    margin-right: 10px;
  }
  .text{
    font-size: 16px;
    font-family: DIN Alternate, DIN Alternate-Bold;
    font-weight: 700;
    color: #5F77C3;
  }
}
</style>
